<script setup>
import { ref } from 'vue'
const lockvisilable = ref(true)
const changelock = () => {
   // Lock the function  
   lockvisilable.value = !lockvisilable.value; // Toggle the value  
    // Set timeout to reset the lock after 1 second  
  }
</script>
<template>
  <div class="playwarp" :class="{locked:!lockvisilable}">
    <div class="lock" @click="changelock">
      <el-icon class="lockicon" v-show="!lockvisilable">
        <Lock />
      </el-icon>
      <el-icon class="unlockicon" v-show="lockvisilable">
        <Unlock />
      </el-icon>
    </div>
  </div>
  <RouterView />
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.playwarp {
  width: 100%;
  height: 5px;
  background: #e19898;
  opacity: 0.8;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  transition: 0.8s;

  .lock {
    width: 50px;
    height: 30px;
    background: #e19898;
    border-radius: 15px 15px 0 0;
    position: absolute;
    cursor: pointer;
    right: 0;
    top: -30px;
    .el-icon {
      font-size: 20px;
      color: white;
      position: absolute;
      top: 5px;
      left: 15px;
    }
  }
}
.playwarp:hover {
  height: 50px;
}
.locked{
  height: 50px;
}
</style>
